<template>
  <div style="height: 100%">
    <navbar :title="$t('find_information')"></navbar>
    <div class="content-noBottom">
      <!--目录展示  左右滑动-->
      <div class="catalog-container">
        <van-tabs @click="selectType">
          <van-tab  v-for="(item,index) in catalogList" :key="index" :name="item.atyId" :title="item.atyTitle">
          </van-tab>
        </van-tabs>
      </div>
      <!--数据列表-->
      <div  style="height: calc(100% - 64px);background-color: #f5f5f5">
        <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
          <van-list
          v-model="isLoading"
          :finished="finished"
          :finished-text="(finished&&total>0) ? $t('no_more') : ''"
          loding-text="loading"
          @load="getSpecialList"
          >
            <div class="list-container">
              <div v-if="specialList.length > 0" v-for="(item,index) in specialList" :key="index" class="list-items" @click="jumpSpecial(item.artId,item.artTitle)">
                <van-image width="100%" height="80px" :src="appUrl + item.artIconFile" lazy-load></van-image>
                <p>{{item.artTitle}}</p>
                <div class="list-items-desc">
                    <span class="desc-container">
                      <van-icon name="good-job-o" color="#9a9a9a" />
                      <span >{{item.likeCount || 0}}</span>
                    </span>
                  <span class="desc-container">
                      <span >{{item.artUpdateDatetime | substringTime}}</span>
                    </span>
                </div>
              </div>
            </div>
            <!--暂无数据-->
            <div v-if="total <= 0 && !isLoading" style="height:420px">
              <div class="box-table" style="width:100%;height:100%;">
                <div class="box-table-cell" style="text-align: center;">
                  <div class="no-data" >
                    <img src="../../../static/images/no-data.png" alt=""/>
                    <p class="color999">{{ $t("no_data") }}</p>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <common-loading :isLoading="isLoading"></common-loading>
  </div>
</template>

<script>

import {Icon, Tab, Tabs} from 'vant';
export default {
    name: 'FreshInformation',
    components: {[Icon.name]: Icon, [Tab.name]: Tab, [Tabs.name]: Tabs},
    data() {
        return {
            selectedCatalog: 0, //选中的目录
            catalogList: [], //目录数据
            specialList: [], //专题数据
            pageSize: 10,
            pageNo: 1,
            total: 0,
            isLoading: false,
            totalPage: 0,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        // 查询目录list
        getCatalogList() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/article/type`
            }).then(res => {
                if (res && res.status === 200) {
                    this.catalogList = this.makeCatalog(res.data);
                }
            });
        },
        //查询资讯数据
        /*eslint-disable*/
        getSpecialList(option) {
            this.isLoading = true;
            let temp = {
                pageSize: this.pageSize,
                pageNo: this.pageNo
            };
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/article/list/${this.selectedCatalog}`,
                params: temp,
                data: {isMobile: "1"}
            }).then(res => {
                if (res && res.status === 200) {
                    if (option && option === 'refresh') {
                        this.specialList = res.data.results;
                    } else {
                        this.specialList = [...this.specialList, ...res.data.results];
                    }
                    this.isLoading = false;
                    this.total = res.data.totalRecord;
                    this.totalPage = res.data.totalPage;
                    this.pageNo++;
                    if (this.specialList.length >= this.total) {
                        this.finished = true;
                    }
                }
            });
        },
        //处理目录
        makeCatalog(data) {
            let temp = {atyTitle: this.$t('type_all_title'), atyId: 0};
            data.unshift(temp);
            return data;
        },
        //指定目录
        selectType(name) {
            this.pageNo = 1;
            this.selectedCatalog = name;
            this.getSpecialList('refresh');
        },
        onPulldownTop() {
          this.isRefresh = true;
            setTimeout(() => {
              this.isRefresh = true;
              this.pageNo = 1;
              this.getSpecialList('refresh');
              this.isRefresh = false;
            }, 900);
        },
        //跳转详情
        jumpSpecial(id, title) {
            this.$router.push({path: '/freshInformationDetail', query: {id, title}});
        }

    },
    mounted() {
        this.getCatalogList();
        this.getSpecialList('refresh');
    }
};
</script>

<style scoped lang="less">
  /deep/.van-tab{
    flex: 1 0 auto;
  }
  .catalog-container{
    background-color: #fff;
    padding: 10px;
    >p{
      font-size: 16px;
      font-weight: bold;
      line-height: 30px;
      width: 33px;
    }
    .catalog-items{
      display: flex;
      flex-wrap: wrap;
      >span{
        max-width: max-content;
        line-height: 22px;
        margin: 5px 8px;
      }
    }
  }
  .list-container{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    .list-items{
      width: 45%;
      height: 100%;
      background-color: #fff;
      margin: 2.5%;
      &:nth-child(2n){
        margin-right: 0;
      }
      >p{
        display: inline-block;
        white-space: nowrap;
        width: 95%;
        overflow: hidden;
        text-overflow:ellipsis;
      }
      img{
        height: 67px;
        min-height: 67px;
        width: 100%;
        min-width: 100%;
      }
      p{
        font-size: 12px;
        margin: 5px;
      }
      .list-items-desc{
        display: flex;
        justify-content: space-between;
        margin-top: 5%;
        margin-left: 5px;
        margin-right: 5px;
        padding-bottom: 15px;
        .desc-container{
          display: flex;
          align-items: center;
          span{
            color: #9a9a9a;
            font-size: 12px;
            margin-left: 5px
          }
        }
      }
    }
  }
  /deep/.van-image__img{
    border-radius: 0px !important;
  }
</style>
